<template>
  <div class="HospitalList">
    <!--    面包屑-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '' }">医院信息管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '' }">医院管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="hospitalMain">
      <!--      搜索部分-->
      <div class="hospitalMain-search">
        <div class="search">
          医院名称:
          <el-input placeholder="请输入内容" clearable v-model="hos_name"></el-input>
        </div>
        <div class="search">
          医院地址:
          <el-input placeholder="请输入内容" clearable v-model="hos_address"></el-input>
        </div>
        <div class="search">
          医院别名:
          <el-input placeholder="请输入内容" clearable v-model="hos_aliss"></el-input>
        </div>
        <div class="search">
          医院等级:
          <template>
            <el-select v-model="levelValue" clearable placeholder="请选择">
              <el-option v-for="item in hospitalLevelList" :key="item.id" :label="item.level" :value="item.level">
              </el-option>
            </el-select>
          </template>
        </div>
        <div class="search block">
          <span class="demonstration">创建时间：</span>
          <el-date-picker v-model="hos_regtime" type="date" placeholder="选择日期">
          </el-date-picker>
        </div>
        <div class="search">
          <div></div>
          <div>
            <el-button @click="Reset">重置</el-button>
            <el-button type="primary" @click="SearchHosBtn">搜索</el-button>
          </div>
        </div>
      </div>
      <!--表格名和添加部分-->
      <div class="name_add">
        <div>
          <h3>医院列表</h3>
        </div>
        <div>
          <el-button type="primary" @click="addHosBtn">新增医院</el-button>
        </div>
      </div>
      <!--    表格-->
      <template>
        <el-table :data="hospitalList">
          <el-table-column label="ID">
            <template slot-scope="scope">
              <span>{{ scope.row.hid }}</span>
            </template>
          </el-table-column>

          <el-table-column label="医院名称">
            <template slot-scope="scope">
              <span>{{ scope.row.hos_name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="医院别名">
            <template slot-scope="scope">
              <span>{{ scope.row.aliss }}</span>
            </template>
          </el-table-column>
          <el-table-column label="医院地址">
            <template slot-scope="scope">
              <span>{{ scope.row.address }}</span>
            </template>
          </el-table-column>
          <el-table-column label="医院等级">
            <template slot-scope="scope">
              <span>{{ scope.row.estate }}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建时间">
            <template slot-scope="scope">
              <span>{{ scope.row.hos_regTime | formatDate }}</span>
            </template>
          </el-table-column>
          <el-table-column label="已有医生">
            <template slot-scope="scope">
              <span>{{ scope.row.employees }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="middle" type="text" @click="showHosMsg(scope.row.hid)">查看
              </el-button>
              <el-button size="middle" type="text" @click="updateHosBtn(scope.row.hid, scope.row.address)">编辑
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!--    页码-->
      <el-pagination background layout="prev, pager, next" :total="hospitalCount" @current-change="getPageNumBtn"
        :current-page="currentPage" :page-size="limitSize"></el-pagination>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import { formatDate } from "@/utils/date";

export default {
  name: "HospitalList",
  computed: {
    ...mapGetters(["hospitalLevelList"]),
  },
  data() {
    return {
      hos_name: "",
      hos_address: "",
      hos_aliss: "",
      hos_regtime: "",
      hospitalList: [],
      hospitalCount: null,
      limitSize: 10,
      currentPage: 1,
      levelValue: "",
    };
  },
  mounted() {

    this.getHospitalList(this.currentPage, this.limitSize); //获取医院列表

  },
  methods: {
    //重置
    Reset() {
      this.hos_name = "";
      this.hos_address = "";
      this.hos_aliss = "";
      this.hos_regtime = "";
      this.levelValue = "";
      this.getHospitalList(this.currentPage, this.limitSize); //重新获取医院列表
    },


    //模糊查询医院信息
    SearchHosBtn() {
      this.$service.hospitalService
        .searchHospitalList(this.hos_name)
        .then((res) => {
          this.hospitalCount = res.data.count;
          this.hospitalList = res.data.data;
        });
    },
    //编辑医院
    updateHosBtn(hosId) {
      this.$service.hospitalService.showHospitalMessage(hosId).then((res) => {
        this.$router.push({
          name: "updateHospital",
          params: { hospital: res.data.data },
        });
      });
    },
    //查看医院信息
    showHosMsg(hosId) {
      this.$service.hospitalService.showHospitalMessage(hosId).then((res) => {
        this.$router.push({
          name: "checkHospital",
          params: { hosMsg: res.data.data },
        });
      });
    },
    addHosBtn() {
      this.$router.push("/addHospital");
    },
    getPageNumBtn(val) {
      //获取当前点击的页码
      this.currentPage = val;
      this.getHospitalList(this.currentPage, this.limitSize); //获取医院列表
    },
    //获取医院列表
    getHospitalList(currentPage, limitSize) {
      this.$service.hospitalService
        .getHospitalList(currentPage, limitSize)
        .then((res) => {
          this.hospitalCount = res.data.count;
          this.hospitalList = res.data.data;
        });
    },
  },
  filters: {
    //时间戳转换为日期格式
    formatDate(time) {
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm");
    },
  },
};
</script>

<style scoped lang="less">
.hospitalMain {
  display: flex;
  flex-direction: column;

  .hospitalMain-search {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .el-input,
    .el-select {
      width: 75%;
    }
  }

  .el-pagination {
    margin-top: 10px;
  }
}

.delBtn {
  color: red;
}
</style>
